<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除产品</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 400px; margin: 50px auto; }
        .form-group { margin-bottom: 10px; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 20px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px; }
    </style>
</head>
<body>
<div class="container">
    <h2>删除产品</h2>
    <form id="deleteProductForm">
        <div class="form-group">
            <label for="productName">产品名称:</label>
            <input type="text" id="productName" name="productName" readonly>
        </div>
        <div class="form-group">
            <label for="productDescription">产品描述:</label>
            <textarea id="productDescription" name="productDescription" readonly></textarea>
        </div>
        <div class="form-group">
            <label for="productPrice">价格:</label>
            <input type="text" id="productPrice" name="productPrice" readonly>
        </div>
        <div class="form-group">
            <button type="button" onclick="deleteProduct()">确认删除</button>
            <button type="button" onclick="window.history.back()">取消</button>
        </div>
    </form>
</div>

<script>
    // 获取 URL 参数的函数
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
        var results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    // 填充产品信息
    function fetchProductDetails(productId) {
        fetch(`/api/products/${productId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(product => {
                document.getElementById('productName').value = product.name;
                document.getElementById('productDescription').value = product.description;
                document.getElementById('productPrice').value = product.price;
            })
            .catch(error => {
                console.error('Error fetching product details:', error);
                alert('获取产品详情失败: ' + error.message);
            });
    }

    function deleteProduct() {
        const productId = getParameterByName('id'); // 从URL中获取产品ID

        fetch(`/api/products/${productId}`, {
            method: 'DELETE',
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                // 如果响应状态码不是200，不尝试解析JSON
                if (response.status !== 200) {
                    throw new Error('Failed to delete product');
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                alert('产品删除成功');
                window.history.back();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('产品删除失败: ' + error.message);
            });
    }

    // 页面加载时获取产品ID并填充信息
    document.addEventListener('DOMContentLoaded', function() {
        const productId = getParameterByName('id');
        if (productId) {
            fetchProductDetails(productId);
        }
    });
</script>

</body>
</html>